<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">

      <el-form-item label="14天内是否经过高风险地区">
        <el-switch
          v-model="searchForm.high_risk_areas"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="1"
          inactive-value="0">
        </el-switch>
      </el-form-item><br/>

      <el-form-item label="填报日期">
        <el-date-picker
          v-model="searchForm.start_date"
          type="date"
          placeholder="开始日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-date-picker
          v-model="searchForm.end_date"
          type="date"
          placeholder="结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="学工号">
        <el-input v-model="searchForm.id" placeholder="学工号"></el-input>
      </el-form-item>

      <el-form-item label="身份">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option
            v-for="item in op_status"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="校区">
        <el-select v-model="searchForm.campus" placeholder="请选择">
          <el-option
            v-for="item in op_campus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="体温">
        <el-row type="flex" class="row-bg" gutter="6">
          <el-col :span="6"><el-input
            placeholder="最低体温"
            v-model="searchForm.min_temperature"
            clearable>
          </el-input></el-col>
          <el-col :span="6"><el-input
            placeholder="最高体温"
            v-model="searchForm.max_temperature"
            clearable>
          </el-input></el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="6">
        <el-button type="primary" v-on:click="exportList">导出</el-button>
      </el-col>
    </el-row>

    <el-table :data="yqdkList"  style="width: 100%"
              :default-sort = "{prop: 'full_date', order: 'descending'}">
      <el-table-column sortable prop="id" label="学工号" width="100"></el-table-column>
      <el-table-column sortable prop="full_date" label="填报日期" width="100"></el-table-column>
      <el-table-column sortable prop="name" label="姓名"></el-table-column>
      <el-table-column sortable prop="id_card" label="身份证号" width="200"></el-table-column>
      <el-table-column prop="status" label="身份"></el-table-column>
      <el-table-column prop="campus" label="校区"></el-table-column>
      <el-table-column prop="birthplace" label="籍贯"></el-table-column>
      <el-table-column prop="home" label="居住地"></el-table-column>
      <el-table-column prop="high_risk_areas" label="是否经过高风险地区"></el-table-column>
      <el-table-column prop="phone" label="联系电话" width="180"></el-table-column>
      <el-table-column prop="health" label="身体状况"></el-table-column>
      <el-table-column prop="location" label="当前所在地"></el-table-column>
      <el-table-column sortable prop="temperature" label="体温"></el-table-column>
    </el-table>
  </div>
</template>

<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

<script>
    export default {
      data() {
        return{
          op_campus: [{
            value: '松山湖',
            label: '松山湖'
          }, {
            value: '莞城',
            label: '莞城'
          }],
          op_status: [{
            value: '学生',
            label: '学生'
          }, {
            value: '老师',
            label: '老师'
          }],
          searchForm: {
            id: null,
            start_date: null,
            end_date: null,
            status: null,
            campus: null,
            high_risk_areas: null,
            min_temperature: null,
            max_temperature: null,
          },
          yqdkList: [],
          input: '',
          select: '',
        }
      },
      created(){
        this.showList()
      },
      methods: {
        showList(){
          this.$axios.get('/yqdk/list').then((response) => {this.yqdkList = response.data})
            .catch(() => {
              this.$router.replace({path: '/'});
              location.reload();
            })
        },
        exportList(){
          window.location.href='http://localhost:8024/api/yqdk/export';
        },
        onSubmit(){
          let Data = JSON.stringify(this.searchForm);
          this.$axios({
            method: 'post',
            url: '/yqdk/search',
            headers: {
              "Content-Type": "application/json"  //传json数据要加这个，不然导致后端接收的数据与前端不一致
            },
            data: Data,
          }).then((response)=>{
            this.yqdkList = response.data;
          }).catch((error) => {
            window.alert(error);
          });
        },
      },
    }
</script>

